<template>
  <div class="product">
    <div @click="goBack">返回</div>
    <div>{{ product.name }}</div>
    <img
      style="width: 750px"
      @touchend="touchend"
      v-for="img in product.imgs"
      :key="img"
      :src="img"
    />
    <div>
      <div>{{product.name}}</div>
      <span>{{ minPrice }}</span>
    </div>
    <div>
      <div>
      <span class="salePrice">{{ product.skus[skuIndex].salePrice }}</span>  <span class="originalPrice" v-if="product.skus[skuIndex].originalPrice">{{ product.skus[skuIndex].originalPrice }}</span>
      </div>
      <div :class="{sku:ture,active:index == skuIndex}" @click="changeSku(index)" v-for="sku,index in product.skus" :key="sku.skuId">
        {{ sku.props }}
      </div>
    </div>
    <div v-html="product.content"></div>
  </div>
</template>

<script>
import api from "../api/index";
export default {
  name: "products",
  components: {},
  data() {
    return {
      minPrice: '',
      skuIndex: 0,
      product: {},
    };
  },
  methods: {
    changeSku(index){
      this.skuIndex = index
    },
    goBack() {
      this.$router.back();
    },
    touchend(event) {
      console.log(event);
    },
  },
  created() {},
  mounted() {
    let query = this.$route.query;
    let productId = query.productId;
    this.$http({
      url: "/product?productId=" + productId,
    }).then((product) => {
      product.imgs = product.imgs.split(",");
      for (let i = 0; i < product.imgs.length; i++) {
        product.imgs[i] = api.baseURL + product.imgs[i];
      }
      for(let i = 0;i < product.skus.length; i ++){
        if(product.skus[i].salePrice < this.minPrice){
          this.minPrice = product.skus[i].salePrice
        }
      }
      this.product = product;
    });
  },
};
</script>

<style scoped>
.product {
  font-size: 36px;
}
.originalPrice{
  text-decoration: line-through;
  color:#ccc;
}
.salePrice{
  color:#ff0000;
  font-size: 40px;
}
.sku{
  background:#e1e1e1;
}
.sku.active{
  color: #ff0000;
  border: 1px solid #ff0000;
  background: #fff;
}
</style>